import React from 'react'
import { changeNav,getApplyOrderlist } from '../../actions'
import { connect } from 'react-redux'
import { List,WhiteSpace,Card,Flex,Button,Badge,Tabs,Pagination,Icon,Toast } from 'antd-mobile'
import {appconstant} from '../../common/constant'
import hhistory from '../../history'
import {ajaxGet} from "../../common/jsajaxservice";
import NullList from './../../components/nullList.js'

const Item = List.Item
const Brief = Item.Brief
const TabPane = Tabs.TabPane

class MyBizapply extends React.Component {

	componentDidMount(){
	    this.props.tochangeNav({title:"我的业务申请"})
	    this.props.getApplyOrderlist( this.pagerall )
	    this.props.getApplyOrderlist( this.pagerverify )
	    this.props.getApplyOrderlist( this.pagerverified )
	    this.props.getApplyOrderlist( this.pagercancel )
        this.props.getApplyOrderlist( this.pagerpayed )

    }

	render(){

		const { applyOrderList,getApplyOrderlist } = this.props

		return(
				<Tabs swipeable={ false } defaultActiveKey="1" onChange={ () => {} } onTabClick={ () => {} }>
					<TabPane tab="全部" key="1">
					 	{ this.rendermain( applyOrderList.detail ) }
						<Pagination total={ applyOrderList.total }
					      className="custom-pagination-with-icon"
					      current={ this.pagerall.page - 1 }
					      locale={{
					        prevText: (<span style={{ display:"flex",alignItems:"center" }}><Icon type="left" />上一步</span>),
					        nextText: (<span style={{ display:"flex",alignItems:"center" }}>下一步<Icon type="right" /></span>),
					      }}
					      onChange={ ( e )=>{
					      	this.pagerall.page = e+1 
					      	getApplyOrderlist( this.pagerall )
					      } }
					    />
					</TabPane>
					<TabPane tab="待付款" key="2">
							{ this.rendermain( applyOrderList.payed.detail ) }
						<Pagination total={ applyOrderList.payed.total }
					      className="custom-pagination-with-icon"
					      current={ this.pagerpayed.page - 1 }
					      locale={{
					        prevText: (<span style={{ display:"flex",alignItems:"center" }}><Icon type="left" />上一步</span>),
					        nextText: (<span style={{ display:"flex",alignItems:"center" }}>下一步<Icon type="right" /></span>),
					      }}
					      onChange={ ( e )=>{
					      	this.pagerpayed.page = e+1
					      	getApplyOrderlist( this.pagerpayed )
					      } }
					    />
					</TabPane>
					<TabPane tab="待审核" key="3">
						{ this.rendermain( applyOrderList.verify.detail ) }
						<Pagination total={ applyOrderList.verify.total }
					      className="custom-pagination-with-icon"
					      current={ this.pagerverify.page - 1 }
					      locale={{
					        prevText: (<span style={{ display:"flex",alignItems:"center" }}><Icon type="left" />上一步</span>),
					        nextText: (<span style={{ display:"flex",alignItems:"center" }}>下一步<Icon type="right" /></span>),
					      }}
					      onChange={ ( e )=>{
					      	this.pagerverify.page = e+1
					      	getApplyOrderlist( this.pagerverify )
					      } }
					    />
					</TabPane>
					<TabPane tab="已完成" key="4">
                        { this.rendermain( applyOrderList.verified.detail ) }
						<Pagination total={ applyOrderList.verified.total }
									className="custom-pagination-with-icon"
									current={ this.pagerverified.page - 1 }
									locale={{
                                        prevText: (<span style={{ display:"flex",alignItems:"center" }}><Icon type="left" />上一步</span>),
                                        nextText: (<span style={{ display:"flex",alignItems:"center" }}>下一步<Icon type="right" /></span>),
                                    }}
									onChange={ ( e )=>{
                                        this.pagerverified.page = e+1
                                        getApplyOrderlist( this.pagerverified )
                                    } }
						/>
					</TabPane>
					<TabPane tab="已退回" key="5">
						{ this.rendermain( applyOrderList.cancel.detail ) }
						<Pagination total={ applyOrderList.cancel.total }
					      className="custom-pagination-with-icon"
					      current={ this.pagercancel.page - 1 }
					      locale={{
					        prevText: (<span style={{ display:"flex",alignItems:"center" }}><Icon type="left" />上一步</span>),
					        nextText: (<span style={{ display:"flex",alignItems:"center" }}>下一步<Icon type="right" /></span>),
					      }}
					      onChange={ ( e )=>{
					      	this.pagercancel.page = e+1
					      	getApplyOrderlist( this.pagercancel )
					      } }
					    />
					</TabPane>
				</Tabs>
		)
	}

	pagerall = {
		page:appconstant.pagerconfig.page,
		limit:2,
		applyStatus:-1
	}

	pagerverify = {
		page:appconstant.pagerconfig.page,
		limit:2,
		applyStatus:0
	}

	pagerverified = {
		page:appconstant.pagerconfig.page,
		limit:2,
		applyStatus:3
	}

	pagercancel = {
        page:appconstant.pagerconfig.page,
        limit:2,
        applyStatus:2
    }

    pagerpayed = {
        page:appconstant.pagerconfig.page,
        limit:2,
        applyStatus:4
    }
	goPaying(id) {
		ajaxGet('bd/apply/confirm/payment/'+id).then( (res) => {
			console.log(res);
		})
	}
    gotoremind(id) {
        ajaxGet('bd/apply/order/remind/'+id).then( (res) => {
            console.log(res);
        })
    }
	rendermain( data ){
		if(data.length>0){
            return(
                data.map( ( item,i )=>{
                    return (
						<div className="mybizapply" key={i}>
							<WhiteSpace size="lg" />
							<List>
								<Item  extra={ <Badge style={{width:'1.3rem',background:'#FD8900',fontSize:'0.2rem'}} text={item.applyOrderStatus}/> }>
									<span style={{color:'#333',fontSize:'0.3rem'}}>申请单号：{ item.applyOrderNum }</span>
								</Item>
							</List>
							<Card full
								  onClick={ ()=>{ hhistory.push("/applyDetail/" + item.applyOrderNum ) } }
							>
								<Card.Header
									title={
										<div>
											<p style={{color:"#333",fontSize:'0.28rem',lineHeight:'0.40rem'}}>{ item.productName }</p>
                                            {/*<p style={{color:"#a4a4a4",fontSize:'0.26rem',lineHeight:'0.40rem'}}>{ item.productName }</p>*/}
											<p style={{color:"#a4a4a4",fontSize:'0.26rem',lineHeight:'0.40rem'}}>
												<Icon style={{width:'0.35rem',marginBottom:'-0.12rem',marginRight:'0.1rem'}} type={require('./../../components/assets/icon_wo_shijian.svg')}></Icon>
                                                { item.applyTime }
											</p>
										</div>
                                    }
									thumb={ <img style={{ width:"1.2rem",height:"1.2rem",borderRadius:'0.15rem' }} src={ item.productLogo }/> }
									extra={	<div style={{color:'#FD8900'}}>
										<p>&yen;{ item.totalFee }</p>
										<p style={{marginTop:'0.15rem'}}><Badge style={{
                                            // marginLeft: 12,
                                            padding: '0 0.2rem',
                                            backgroundColor: '#fff',
                                            borderRadius: 2,
                                            color: '#f19736',
                                            border: '1px solid #f19736',
                                            borderRadius:'1rem'
                                        }} text={item.paymentStatus == 0?'待付款':"已付款"}/></p>
									</div> }
								/>
								<Card.Body>
									<div><Icon style={{width:'0.35rem',marginBottom:'-0.12rem',marginRight:'0.1rem'}} type={require('./../../components/assets/icon_wo_jituan.svg')}></Icon>
										集团：{ item.groupName }
									</div>

                                    { ( ()=>{
                                        if( item.storeName !== null ){
                                            return( <div><Icon style={{width:'0.35rem',marginBottom:'-0.12rem',marginRight:'0.1rem'}} type={require('./../../components/assets/icon_wo_shanghu.svg')}>

											</Icon>
												门店：{ item.storeName }等<span style={{color:'#FD8900'}}>{ item.storeNum }</span>个门店
											</div> )
                                        }
                                    } )() }
                                    { ( ()=>{
                                        if( item.terminalNum !== null ){
                                            return( <div>
												<Icon style={{width:'0.35rem',marginBottom:'-0.12rem',marginRight:'0.1rem'}} type={require('./../../components/assets/icon_wo_zhongduan.svg')}>

												</Icon>终端：<span style={{color:'#FD8900'}}>{ item.terminalNum }</span>个</div> )
                                        }
                                    } )() }

								</Card.Body>

							</Card>
							<List>
								<Item arrow="empty">
									<Flex>
										<Flex.Item></Flex.Item>
										<Flex.Item><Button style={{display:item.applyOrderStatus == "开通成功"?'none':'block'}} onClick={item.applyOrderStatus !== '已审核'?this.gotoremind.bind(this,item.applyOrderNum):() => {Toast.info('已审核')}} size="small">{item.applyOrderStatus == '已审核'?'已审核':'提醒审核'}</Button></Flex.Item>
										<Flex.Item><Button onClick={item.paymentStatus == 0?this.goPaying.bind(this,item.applyOrderNum):() => {Toast.info('已付款')}} size="small">{item.paymentStatus == 0?'去付款':'已付款'}</Button></Flex.Item>
									</Flex>
								</Item>
							</List>
							<WhiteSpace size="lg" />
						</div>
                    )
                } )
            )
		}else{
			return(<NullList imgsrc={require('./icon_index_wushenqin.png')} text1='暂时没有待办项'></NullList>)
		}

	}

}

const mapStateToProps = ( state ) => ({
	  applyOrderList:state.applyOrderList
})

const mapDispatchToProps = (dispatch) => ({
	tochangeNav:navobj => dispatch( changeNav( navobj ) ),
	getApplyOrderlist:( data ) => dispatch( getApplyOrderlist( data ) )
})

export default connect( mapStateToProps,mapDispatchToProps )( MyBizapply )